<script>
export default {
  name: "EqNumRender",
  props: {
    ps: {
      type: Array
    },
    name: {
      type: String
    },
    version: {
      type: Number,
      default: 0
    },
    strong: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    calcNum(p) {
      const prop = { ...p }
      if (prop.num) {
        let text = prop.num
        if (prop.isRate) {
          text = (prop.num * 100).toFixed(0)
          text = `${prop.num > 0 ? "+" : ""}${text}%`
        }
        return prop.num == 0 ? null : text
      }
      return ""
    }
  }
}
</script>

<template>
  <view v-for="(prop, i) in ps" :key="i" :class="{ strong }">
    <view class="eq-status">
      <span :style="prop.num ? 'margin-right: 10px' : ''" v-html="prop.label.replaceAll(/@([^@]*)@/g, (m) => `<span style='color:#3ea74e'>${m.slice(1, -1)}</span>`)" />
      <span>{{ calcNum(prop) }}</span>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.eq-status {
  min-height: 10px;
}

.strong {
  color: #b1a785;
}
</style>
